<template>
    <div class="common-layout">
        <el-container>
            <el-header style="margin: 0;padding: 0;height: auto">
                <main-header-bar/>
            </el-header>
            <el-container>
                <el-aside width="250px">
                    <el-menu
                            ref="menuRef"
                            :unique-opened="true"
                            :default-active="activeIndex"
                    >
                        <template v-for="(item,index) in menus">
                            <el-menu-item v-if="!item.children" @click="handlerMenuItemClick(item)" :index="item.path">
                                <qdIcon :name="item.icon"/>
                                {{ item.title }}
                            </el-menu-item>
                            <el-sub-menu v-else :index="item.path">
                                <template #title>
                                    <span><qdIcon :name="item.icon"/>{{ item.title }}</span>
                                </template>
                                <template v-if="item.children">
                                    <el-menu-item-group>
                                        <el-menu-item v-for="(item,index) in item.children"
                                                      @click="handlerMenuItemClick(item)" :index="item.path">
                                            <qdIcon :name="item.icon"/>
                                            {{ item.title }}
                                        </el-menu-item>
                                    </el-menu-item-group>
                                </template>
                            </el-sub-menu>
                        </template>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-tabs
                            v-model="activeName"
                            type="card"
                            :closable="true"
                            @tab-click="handleTabClick"
                            @tab-remove="handleTabRemove"
                    >
                        <el-tab-pane
                                v-for="item in tabs"
                                :key="item.name"
                                :label="item.title"
                                :name="item.name"
                        >
                            <router-view :name="item.name"></router-view>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import qdIcon from '../components/qd-icom.vue';
import HomeRequest from '../api/home.js';
import MainHeaderBar from "../components/widget/bar/MainHeaderBar.vue";

export default {
    components: {qdIcon, MainHeaderBar},

    data() {
        return {
            activeName: "index",
            activeIndex: "/index",
            tabs: [],
            menus: []
        }
    },
    methods: {
        // 同步加载菜单
        async loadMenus(callBack) {
            let res = await HomeRequest.getHomeData();
            this.menus = res;
            if (callBack) {
                callBack();
            }
        },
        handleTabRemove(paneName) {
            this.tabs = this.tabs.filter(item => item.name != paneName);
            if (paneName == this.activeName) {
                if (this.tabs.length == 0) {
                    this.$router.push("/index");
                } else {
                    this.$router.push("/" + this.tabs[0].name);
                }
            }
        },
        handlerMenuItemClick(item) {
            this.activeName = item.name;
            this.$router.push(item.path);

        },
        handleTabClick(pane, event) {
            this.$router.push("/" + pane.props.name);
            this.activeIndex = "/" + pane.props.name;
        },
        /**
         * 通过path递归menu对象
         * @param {*} path
         */
        findMenuByPath(path, menus) {
            for (let i = 0; i < menus.length; i++) {
                let menu = menus[i];
                if (menu.path == path) {
                    return menu;
                }
                if (menu.children) {
                    let result = this.findMenuByPath(path, menu.children);
                    if (result) {
                        return result;
                    }
                }
            }
        }
    },
    beforeCreate() {

    }
    , created() {
        // 加载所有菜单
        this.loadMenus();
    }, mounted() {
// 给路由添加了前置拦截器
        this.$router.beforeEach((to, from) => {
            console.log(this.menus)
            if (this.menus == undefined || this.menus.length == 0) {
                this.loadMenus(() => {
                    // 通过路由要取的路径找到对应的菜单
                    let item = this.findMenuByPath(to.path, this.menus);
                    if (item == undefined) {
                        this.tabs.push({
                            title: "首页", // 菜单的文本
                            name: "index" // 菜单的name
                        });
                        // 激活对应的tab
                        this.activeName = "index";
                        // 激活对应的菜单
                        this.activeIndex = "/index";
                        return;
                    }
                    let flag = false; // 表单这个菜单对应的内容在tabs中是不存在的
                    this.tabs.forEach(t => {
                        if (t.name == item.name) {
                            flag = true; // 表示这个菜单对应的内容在tabs中是存在的
                        }
                    });
                    if (!flag) {// 如果不存在对应的tab内容，就添加一个新的tab内容。
                        this.tabs.push({
                            title: item.title, // 菜单的文本
                            name: item.name // 菜单的name
                        });
                    }
                    // 激活对应的tab
                    this.activeName = item.name;
                    // 激活对应的菜单
                    this.activeIndex = to.path;
                    return true;
                });
            } else {
                // 通过路由要取的路径找到对应的菜单
                let item = this.findMenuByPath(to.path, this.menus);
                if (item == undefined) {
                    this.tabs.push({
                        title: "首页", // 菜单的文本
                        name: "index" // 菜单的name
                    });
                    // 激活对应的tab
                    this.activeName = "index";
                    // 激活对应的菜单
                    this.activeIndex = "/index";
                    return;
                }
                let flag = false; // 表单这个菜单对应的内容在tabs中是不存在的
                this.tabs.forEach(t => {
                    if (t.name == item.name) {
                        flag = true; // 表示这个菜单对应的内容在tabs中是存在的
                    }
                });
                if (!flag) {// 如果不存在对应的tab内容，就添加一个新的tab内容。
                    this.tabs.push({
                        title: item.title, // 菜单的文本
                        name: item.name // 菜单的name
                    });
                }
                // 激活对应的tab
                this.activeName = item.name;
                // 激活对应的菜单
                this.activeIndex = to.path;
                return true;
            }

        })

    }
}
</script>